<template>
	<scroll-view style="height: 100%;position: absolute;width: 100%;top:0;left:0" :scroll-y="!scrollLock">
		<view class="boxSty" :class="{ scrollLock: scrollLock }">
			<view class="swiperBoxSty">
				<swiper class="swiper" circular>
					<swiper-item>
						<view class="swiper-item uni-bg-red">
							<!-- <image src="@/static/img/swiper.png" mode="" class="swiperSty"></image> -->
							<image src="../../static/img/homeBgImg2.png" mode="" class="swiperSty"></image>
						</view>
					</swiper-item>
				</swiper>
			</view>
			<view class="infoBox">
				<view class="sendGoodSty">
					<view class="titlSty h-100">
						<view class="title " :class="{ activeSty: index == 0 }" @click="index = 0">
							<view class="bigRadius">
								<p>{{$t('大件运输')}}</p>
								<image v-show="index == 0" src="@/static/homePage/1.png"
									style="position: absolute;right: 0;top: -1rpx;display: block;transform: translateX(99%);height:103%;width: 100rpx;">
								</image>
							</view>
							<p v-if="index == 0" class="lineSty"></p>
						</view>
						<view class="title" :class="{ activeStySmall: index == 1 }" @click="index = 1">
							<view class="bigRadius">
								<p>{{$t('小件快递')}}</p>
								<image v-show="index == 1" src="@/static/homePage/2.png"
									style="position: absolute;left: 0;top: -1rpx;display: block;transform: translateX(-99%);height:103%;width: 100rpx;">
								</image>
							</view>
							<p v-if="index == 1" class="lineSty"></p>
						</view>
					</view>
					<view class="cityBox mt-30">
						<view class="citySty pt-10">

							<city is_all="true" @openStateChange="(state) => { scrollLock = state }"
								:value="fullBeginAddressKey" @change="onChangeStar">
								{{ fullBeginAddress || $t('请选择城市') }}
							</city>
					
						</view>
						<image src="@/static/icon/change.png" mode="" @click="() => {
							let tempAddress = fullBeginAddress
							let tempAddressKey = fullBeginAddressKey
							fullBeginAddress = fullEndAddress
							fullBeginAddressKey = fullEndAddressKey
							fullEndAddress = tempAddress
							fullEndAddressKey = tempAddressKey
						}"></image>
						<view class="citySty text-right pt-10" style="text-align: left;">

							<city is_all="true" :value="fullEndAddressKey" @change="e => {
								fullEndAddress = e.column2.value == -1 || e.column3.value == -1 ?
									[e.column1.label, e.column2.label.replace('全部', ''), e.column3.label.replace('全部', '')].filter(item => item).join(',') :
									e.column3.label;
								fullEndAddressKey = [e.column1.value, e.column2.value, e.column3.value].join(',');
								scrollLock = false;
							}">
								<div style="text-align: right;">
									{{ fullEndAddress || $t('请选择城市') }}
								</div>
							</city>

							<!-- <citySelect style="width: 100%;" :text="fullEndAddress" @confirm="e => {
								fullEndAddress = e.column3.label;
								fullEndAddressKey = e.column3.value;
							}" /> -->
						</view>
					</view>
					<view class="goodBtnSty">
						<view class="searchBtn" @click="filterBtn">
							{{$t('货源搜索')}}
						</view>
						<view class="sendBtn" @click="fahuo">
							{{$t('立即发货')}}
						</view>
					</view>
				</view>

				<view class="evenly h-200 bg-white m-16 rounded-26">
					<view v-for="(item, index) in iconList" class="center flex-col posti" @click="goFun(index)">
						<view class="">
							<image :src="item.image" mode="" class="w-70 h-58"></image>
							<p class="text-555 fz22 mt-24">{{ item.text }}</p>
						</view>
						<!-- <u-badge class="badgeSty" v-if="index == 1" max="99" :value="valueNum" shape="horn" absolute="true"></u-badge> -->
					</view>
				</view>

				<view class="h-280 bg-white m-16 mt-16 memberCenter" @click="goToHui">
					<view class="between">
						<view class="showDiscounts">
							<p class="fz28 font-bold text-010">{{$t('会员中心')}}</p>
							<view class="discountSy">
								<view class="timeShow flex">
									{{$t('限时优惠')}}
								</view>
								<div class="fz22">
									<u-count-down :time="30 * 60 * 60 * 1000" format="HH:mm:ss"></u-count-down>
								</div>
							</view>
						</view>
						<view class="moreSty">
							更多会员福利 >
						</view>
					</view>
					<image src="@/static/img/memberImg.png" mode="" class="memberSty"></image>
				</view>

				<view class="toSeeSty">
					<view class="seeBox" @click="fanyi">
						<view class="mt-30">
							<span class="blackSty">{{$t('翻译官')}}·</span>
							<span class="blueSty">{{$t('解决沟通')}}</span>
						</view>
						<p class="darkSty">3000+{{$t('翻译为您全面服务')}}</p>
						<view class="seeBtnSty">
							<view class="seeBtn">
								{{$t('去看看')}}
							</view>
							<image src="@/static/img/translate.png" mode="" class="imgSty"></image>
						</view>
					</view>
					<view class="seeBox" @click="goods">
						<view class="mt-30">
							<span class="blackSty">{{$t('优质货主')}}·</span>
							<span class="blueSty">{{$t('专注外贸')}}</span>
						</view>
						<p class="darkSty">{{$t('优质货源，持续供应')}}</p>
						<view class="seeBtnSty">
							<view class="seeBtn">
								{{$t('去看看')}}
							</view>
							<image src="@/static/img/earth.png" mode="" class="imgSty"></image>
						</view>
					</view>

				</view>

				<view class="hotBox">
					<view class="between">
						<p class="hotKind">
							{{$t('热门展会')}}
							<span></span>
						</p>
						<p class="allKind">全部展会 > </p>
					</view>

					<image @click="goMeeting" src="@/static/meeting.png" mode="widthFix" class="w-full"></image>
					<!-- <view class="flex-start watchSty">
						<image src="@/static/img/showImage1.png" mode="" class="w-135 h-175 ml-24 mt-26"></image>
						<view class=" mt-26 ml-18">
							<p class="text-010 fz28 font-bold">{{$t('哈尔滨')}}·2025中国博览会展厅</p>
							<p class="text-555 fz22 mt-18">{{$t('哈尔滨')}}·南岗区·中央大街135号</p>
							<p class="text-555 fz20 mt-18">2025.03.28 - 2025.03.30 </p>
							<view class="ingSty">
								{{$t('正在进行中')}}
							</view>
						</view>
						<view class="goSty">
							<p>{{$t('前往观看')}}</p>
							<image src="@/static/img/lightning.png" mode="" class="w-20 h-35 ml-5 mr-5"></image>
							<p>Go</p>
						</view>
					</view>
					<view class="flex-start watchSty mt-28 pb-38">
						<image src="@/static/img/showImage2.png" mode="" class="w-135 h-175 ml-24 mt-26"></image>
						<view class=" mt-26 ml-18">
							<p class="text-010 fz28 font-bold">{{$t('哈尔滨')}}·2025中国博览会展厅</p>
							<p class="text-555 fz22 mt-18">{{$t('哈尔滨')}}·南岗区·中央大街135号</p>
							<p class="text-555 fz20 mt-18">2025.03.28 - 2025.03.30 </p>
							<view class="readySty">
								预热
							</view>
						</view>
						<view class="readybegin">
							<p>{{$t('未开始')}}</p>
						</view>
					</view> -->
				</view>

				<view class="cardListBox">
					<view v-for="(item, index) in cardList" class="cardSty" :class="{ activeCard: current == index }"
						@click="changeList(index)">
						<p>{{ item }}</p>
						<p v-if="current == index" class="ativeLine"></p>
					</view>
				</view>

				<view class="content-inner" style="margin-top: 10px;" v-for="(allInfo, index) in goods_list"
					:key="index" v-if="allInfo.departure.area_info && current == 0">
					<div class="content-time">
						<p class="time">{{$t('发布时间')}}：<span class="text-010 font-bold">{{ allInfo.create_at || '' }}</span></p>
						<p class="kind">{{ allInfo.goods_type == 0 ? $t('大件') : $t('小件') }} - {{ allInfo.demandValue || '' }}
						</p>
					</div>

					<div class="content-top">
						<div class="colorSty">
							<div class="between items-start">
								<div class="flex route-item">
									<div style="text-align: center;" v-if="allInfo.departure.area_info">
										{{ allInfo.departure.area_info.name || '' }}
									</div>
								</div>
								<view class="line mt-15">
									<view v-if="allInfo.transfer_count !== 0" class="text">
										{{$t('途经')}}{{ allInfo.transfer_count }}
									</view>
									<image class="ico" src="/static/img/ico_line2.png" mode="widthFix"></image>
								</view>
								<div class="flex route-item">
									<div style="text-align: center;" v-if="allInfo.reach.area_info">
										{{ allInfo.reach.area_info.name || '' }}
									</div>
								</div>
							</div>
							<div class="between items-start mt-10">
								<div class="address" v-if="allInfo.departure.area_info">
									<flag class="mr-6 mt-4" :country="get(allInfo, 'departure.area_info.country')" />

									<p>{{ allInfo.departure.area_info.mergename || '' }}</p>
								</div>
								<div></div>
								<div class="address" v-if="allInfo.reach.area_info">
									<flag class="mr-6 mt-4" :country="get(allInfo, 'reach.area_info.country')" />

									<p>{{ allInfo.reach.area_info.mergename || '' }}</p>
								</div>
							</div>
						</div>
					</div>

					<view class="content-info">
						<span class="info-title">{{$t('货物信息')}}: </span>
						<span class="info-content">{{ [allInfo.goods_info.title, allInfo.goods_info.goods_weight + "吨",
						allInfo.goods_info.goods_volume + '立方米', allInfo.goods_info.package.title].filter(item =>
							item).join('/') || '' }}</span>
					</view>
					<p class="lineCardSty"></p>
					<view class="flex-end mb-16">
						<view class="btnBottomSty mr-24" @click="goDetail(allInfo)">
							{{$t('查看详情')}}
						</view>
						<!-- <view class="btnBottomSty" @click="chat(allInfo.tel)">
							{{$t('在线联系')}}
						</view>
						<view class="btnBottomSty mr-24 ml-30" @click="call(allInfo.tel)">
							{{$t('打电话')}}
						</view> -->
					</view>

				</view>
				<view class="" v-if="current == 1">
					<view v-if="!vipStatus" class="shadowBoxSty">
						<view class="shadowSty"></view>
						<view class="vipTextSty">
							<p class="">升级VIP</p>
							<p class="mt-5">{{$t('查看更多询单信息')}}</p>
						</view>

					</view>
				</view>
				<view class="" v-if="current == 2">
					<view v-if="!vipStatus" class="shadowBoxSty">
						<view class="shadowSty"></view>
						<view class="vipTextSty">
							<p class="">升级VIP</p>
							<p class="mt-5">{{$t('查看更多询单信息')}}</p>
						</view>

					</view>
				</view>
				<view class="" v-if="current == 3">
					<view v-if="!vipStatus" class="shadowBoxSty">
						<view class="shadowSty"></view>
						<view class="vipTextSty">
							<p class="">升级VIP</p>
							<p class="mt-5">{{$t('查看更多询单信息')}}</p>
						</view>
						
					</view>
				</view>
				<view v-if="current == 0 || (current == 3 || current == 1 || current == 2) && vipStatus"
					class="center text-gray-500 fz24 pt-20 pb-20" style="margin-bottom: 120rpx;">
					{{$t('没有更多了')}}
				</view>

			</view>

		</view>
	</scroll-view>
</template>

<script>
import regionsPicker from './components/regions.vue';
import {
	regionList
} from '@/utils/region.js'
import citySelect from "./components/citySelect.vue"

export default {
	components: {
		citySelect
	},
	data() {
		return {
			isShow: true,
			scrollLock: false,
			vipStatus: false,
			countdownTime: 86460, // 倒计时总时间，例如60秒
			value1: 0,
			index: 0,
			current: 0,
			fullBeginAddress: '',
			fullBeginAddressKey: '',
			fullEndAddress: '',
			fullEndAddressKey: '',

			cardList: [this.$t('最新货源'), this.$t('活跃货主'), this.$t('空闲车源'), this.$t('平台成交')],
			valueNum: 15,
			type: 'warning',
			iconList: [{
				text: this.$t('车源信息'),
				image: require("@/static/icon/carIcon.png")
			},
			{
				text: this.$t('货源信息'),
				image: require("@/static/icon/boxIcon.png")
			},
			{
				text: this.$t('企业排行'),
				image: require("@/static/icon/cupIcon.png")
			},
			{
				text: this.$t('专业代办'),
				image: require("@/static/icon/professIcon.png")
			},
			{
				text: this.$t('保险业务'),
				image: require("@/static/icon/insurance.png")
			}
			],
			goods_list: [{
				create_at: '2024-12-21 10:35',
				goods_type: 0,
				demandValue: this.$t('运输、通关'),
				departure: {
					area_info: {
						name: this.$t('哈尔滨'),
						mergename: this.$t('黑龙江省')
					}
				},
				reach: {
					area_info: {
						name: this.$t('莫斯科'),
						mergename: this.$t('诺克萨斯州')
					}
				},
				transfer_count: 2,
				goods_info: {
					title: this.$t('办公用品'),
					goods_weight: ' 2',
					goods_volume: '4',
					package: {
						title: this.$t('木架卷')
					}
				}
			},]
		}
	},
	mounted() {
		this.delivery_select()
	},
	methods: {
		onChangeStar(e) {
			this.fullBeginAddress = e.column2.value == -1 || e.column3.value == -1 ? [e.column1.label, e.column2.label.replace(this.$t('全部'), ''), e.column3.label.replace(this.$t('全部'), '')].filter(item => item).join(',') : e.column3.label;
			this.fullBeginAddressKey = [e.column1.value, e.column2.value, e.column3.value].join(',');
			this.scrollLock = false;
		},
		goMeeting() {
			uni.navigateTo({
				url: "/pages/EventManagementDetail/index",
				webview: "zWebViewOline"
			})
		},
		log() {
			console.log(123);
		},
		fanyi() {
			uni.navigateTo({
				url: "/pages/translate/theInterpreter/index"
			})
		},
		goToHui() {
			uni.navigateTo({
				url: "/pages/vip/index"
			})
		},
		goods() {
			uni.navigateTo({
				// url: "/pages/zWebView/zWebView?url=/pages/forwardingInformation/index"
				url: "/pages/highQualityShippers/index"
			})
		},
		vip() {
			uni.$u.toast('敬请期待')
		},
		changeList(index) {
			this.current = index
		},
		fahuo() {
			// uni.switchTab({
			// 	url:'/pages/tabbar/publish/start'
			// })
			uni.navigateTo({
				url: "/pages/publish/start"
			})
		},
		filterBtn() {
			const params = {
				departure_area: this.fullBeginAddressKey || '',
				reach_area: this.fullEndAddressKey || '',
				fullBeginAddress: this.fullBeginAddress || '',
				fullEndAddress: this.fullEndAddress || '',
				goods_type: this.index
			}
			// uni.setStorageSync("filterList", params)
			uni.navigateTo({
				url: "/pages/sourceInformation/index?item=" + JSON.stringify(params)
			})
		},
		goFun(index) {
			switch (index) {
				case 0:
					uni.navigateTo({
						url: "/pages/vehicleSourceInformation/index"
					})
					break
				case 1:
					uni.navigateTo({
						url: "/pages/sourceInformation/index"
					})
					break
				case 2:
					uni.navigateTo({
						url: "/pages/forwardingInformation/index",
					})
					break
				case 3:
					uni.navigateTo({
						url: "/pages/tabbar/professionalList/professionIIndex",
						webview: 'zWebViewShop'
					})
					break
				case 4:
					uni.$u.toast('敬请期待')
					break
			}
		},
		delivery_select() {
			var that = this
			uni.request({
				url: 'https://freight.gluz.com.cn/api/index/delivery_select',
				method: 'POST',
				header: {
					'xzdToken': uni.getStorageSync('xzdToken'),
					'version': uni.getStorageSync('version'),
					'lang': uni.getStorageSync('lang'),
				},
				data: {
					'user_id': uni.getStorageSync('user_id'),
				},
				success: (r) => {

					if (r && r.data && r.data.data) {
						that.goods_list = r.data.data.data
					}
					console.log(that.goods_list);

				},
			})
		},
		goDetail(info) {
			// uni.navigateTo({
			// 	url: `/pages/sourceInformation/sourceDeatil?item=${JSON.stringify(info)}`
			// })
			uni.navigateTo({
				url: `/pages/sourceInformation/sourceDeatil?id=${info.id}`
			})
		},
		chat(mobile) {
			console.log(mobile)
			createC2CConversation(mobile, this)
		},
		call(mobile) {
			let firstChar = mobile.slice(0, 1);
			if (firstChar == 1) {
				uni.makePhoneCall({
					phoneNumber: mobile,
					success: (res) => { },
					fail: (err) => { }
				})
			} else if (firstChar == 9) {
				uni.makePhoneCall({
					phoneNumber: '+7' + mobile,
					success: (res) => { },
					fail: (err) => { }
				})
			} else if (firstChar == 8) {
				uni.makePhoneCall({
					phoneNumber: '+7' + mobile.slice(1),
					success: (res) => { },
					fail: (err) => { }
				})
			} else if (firstChar == 7) {
				uni.makePhoneCall({
					phoneNumber: '+' + mobile,
					success: (res) => { },
					fail: (err) => { }
				})
			} else {
				uni.makePhoneCall({
					phoneNumber: mobile,
					success: (res) => { },
					fail: (err) => { }
				})
			}
		}

	}
}
</script>


<style lang="less">
page {
	background: #F6F7FB;
}

/deep/.u-count-down__text {
	color: #7D0B00;
	font-size: 24rpx;
	position: relative;
	top: -5rpx;
	left: 14rpx;
}

/deep/.uni-picker-custom {
	bottom: 50px !important;
}

.boxSty {
	.swiperBoxSty {
		height: 600rpx;
		position: relative;

		.swiper {
			height: 600rpx !important;
		}

		.swiperSty {
			width: 100%;
			height: 578rpx;
		}
	}

	.infoBox {
		width: 100%;
		position: absolute;
		margin-top: -260rpx;
	}

	.sendGoodSty {
		width: 96%;
		height: 400rpx;
		flex-shrink: 0;
		background: #fff;
		margin: 0 auto;
		border-radius: 22rpx;

		.titlSty {
			height: 100rpx;
			background: linear-gradient(97deg, #3F9CFF 44.87%, #66D6E2 91.88%);
			display: flex;
			justify-content: flex-start;
			border-radius: 22rpx 22rpx 0 0;
			overflow-y: hidden;

			.activeSty {
				width: 50%;
				height: 100rpx;
				background: #fff;
				color: #278AFF !important;
				font-family: "PingFang SC";
				font-size: 32rpx;
				font-style: normal;
				font-weight: 600;
				line-height: 110rpx;
				text-align: center;
				// margin-top: -10rpx;
				border-radius: 22rpx 0 0 0;
			}

			.activeStySmall {
				width: 50%;
				height: 100rpx;
				background: #fff;
				color: #278AFF !important;
				font-family: "PingFang SC";
				font-size: 32rpx;
				font-style: normal;
				font-weight: 600;
				line-height: 110rpx;
				text-align: center;
				// margin-top: -10rpx;
				border-radius: 0 22rpx 0 0;
			}

			.title {
				width: 50%;
				height: 110rpx;
				color: #FFF;
				text-shadow: 1rpx 2rpx 4rpx rgba(0, 0, 0, 0.39);
				font-family: "PingFang SC";
				font-size: 28rpx;
				font-style: normal;
				font-weight: 600;
				line-height: 100rpx;
				text-align: center;
				position: relative;
			}

			.lineSty {
				width: 80rpx;
				height: 8rpx;
				margin: 0 auto;
				margin-top: -20rpx;
				flex-shrink: 0;
				border-radius: 23rpx;
				background: linear-gradient(90deg, #0095FF 0%, #66D6E2 100%);
			}

			.bigRadius {
				position: relative;
			}
		}

		.goodBtnSty {
			display: flex;
			justify-content: space-evenly;

			.searchBtn {
				width: 190rpx;
				height: 90rpx;
				flex-shrink: 0;
				border-radius: 500rpx;
				border: 1rpx solid #D8D8D8;
				background: #FFF;
				color: #8C8C8C;
				font-family: "PingFang SC";
				font-size: 28rpx;
				font-style: normal;
				font-weight: 400;
				text-align: center;
				line-height: 90rpx;
				/* 100% */
			}

			.sendBtn {
				width: 428rpx;
				height: 90rpx;
				flex-shrink: 0;
				border-radius: 500rpx;
				background: linear-gradient(90deg, #278AFF 0%, #66D6E2 100%);
				color: #FFF;
				font-family: "PingFang SC";
				font-size: 34rpx;
				font-style: normal;
				font-weight: 600;
				text-align: center;
				line-height: 90rpx;
				/* 100% */
			}
		}

		.cityBox {
			width: 96%;
			height: 90rpx;
			display: flex;
			justify-content: space-evenly;
			margin-bottom: 36rpx;

			.citySty {
				width: 274rpx;
				height: 100%;
				border-bottom: 2rpx solid #F0F0F0;
				color: #0E0E0E;
				font-family: "PingFang SC";
				font-size: 36rpx;
				font-style: normal;
				font-weight: 600;
			}

			image {
				width: 60rpx;
				height: 60rpx;
			}
		}
	}

	.memberCenter {
		width: 96%;
		height: 280rpx;
		border-radius: 22rpx;
		background: linear-gradient(343deg, #FFF 18.41%, #FFF2DF 90.43%);

		// fill: linear-gradient(343deg, #FFF 18.41%, #FFF2DF 90.43%);
		// stroke-width: 1px;
		// stroke: #FFBD00;
		// filter: drop-shadow(0px 1px 20.5px rgba(205, 205, 205, 0.19));
		.memberSty {
			width: 94%;
			height: 155rpx;
			margin-left: 24rpx;
		}

		.showDiscounts {
			display: flex;
			justify-content: flex-start;
			margin: 36rpx 10rpx 24rpx 24rpx;

			.discountSy {
				width: 230rpx;
				height: 36rpx;
				flex-shrink: 0;
				border-radius: 30.302rpx;
				border: 1.122rpx solid #FF9500;
				background: #FFF;
				margin-left: 10rpx;
				margin-top: 5rpx;
				display: flex;

				.timeShow {
					width: 100rpx;
					height: 32rpx;
					flex-shrink: 0;
					background: linear-gradient(90deg, #FF9700 0%, #FFC821 100%);
					color: #FFF;
					font-family: "PingFang SC";
					font-size: 18rpx;
					font-style: normal;
					font-weight: 500;
					line-height: 28rpx;
					padding-left: 14rpx;
					border-radius: 10rpx 0 0 10rpx;
					// margin-left: 4rpx;
				}

				p {
					color: #7D0B00;
					text-align: center;
					font-family: "PingFang SC";
					font-size: 18rpx;
					font-style: normal;
					font-weight: 400;
					line-height: 28rpx;
					margin-left: 8rpx;
				}
			}
		}

		.moreSty {
			width: 138rpx;
			height: 32rpx;
			flex-shrink: 0;
			border-radius: 500rpx;
			background: #FFD79D;
			color: #7D0A00;
			text-align: center;
			font-family: "PingFang SC";
			font-size: 16rpx;
			font-style: normal;
			font-weight: 600;
			line-height: 32rpx;
			/* 100% */
			margin-right: 24rpx;
			margin-top: 8rpx;
		}
	}

	.posti {
		position: relative;
	}

	.badgeSty {
		top: -12rpx;
		right: 0;
	}

	.toSeeSty {
		width: 96%;
		height: 238rpx;
		margin: 0 auto;
		flex-shrink: 0;
		background: #fff;
		display: flex;
		justify-content: space-evenly;
		border-radius: 22rpx;

		.seeBox {
			width: 338rpx;
			height: 222rpx;
			flex-shrink: 0;
			margin-top: 8rpx;
			border-radius: 22rpx;
			background: linear-gradient(180deg, rgba(193, 228, 255, 0.67) 0%, rgba(255, 255, 255, 0.67) 52.5%);

			.blackSty {
				color: #000;
				font-family: MiSans;
				font-size: 30rpx;
				font-style: normal;
				font-weight: 600;
				margin-left: 20rpx;
			}

			.blueSty {
				color: #278AFF;
				font-family: MiSans;
				font-size: 30rpx;
				font-style: normal;
				font-weight: 600;
			}
		}

		.darkSty {
			color: #8C8C8C;
			font-family: MiSans;
			font-size: 20rpx;
			font-style: normal;
			font-weight: 400;
			margin-left: 20rpx;
			margin-top: 15.8rpx;
		}

		.seeBtnSty {
			display: flex;
			justify-content: space-between;
			padding-left: 20rpx;
			padding-right: 34rpx;
			margin-top: 42rpx;

			.seeBtn {
				width: 92rpx;
				height: 40rpx;
				flex-shrink: 0;
				border-radius: 11rpx;
				background: rgba(2, 139, 255, 0.82);
				color: #FFF;
				text-shadow: 0 1rpx 4rpx rgba(0, 0, 0, 0.25);
				font-family: "PingFang SC";
				font-size: 20rpx;
				font-style: normal;
				font-weight: 500;
				text-align: center;
				line-height: 40rpx;
				margin-top: 10rpx;
			}

			.imgSty {
				width: 88rpx;
				height: 88rpx;
				flex-shrink: 0;
				margin-top: -15rpx;
			}
		}
	}

	.hotBox {
		width: 96%;
		// height: 200rpx;
		background-color: #fff;
		margin: 16rpx auto 47rpx;
		border-radius: 22rpx;

		.watchSty {
			position: relative;
		}

		.hotKind {
			color: #0E0E0E;
			font-family: "PingFang SC";
			font-size: 32rpx;
			font-style: normal;
			font-weight: 600;
			margin-top: 38rpx;
			margin-left: 24rpx;

			span {
				display: block;
				width: 54rpx;
				height: 6rpx;
				border-radius: 500rpx;
				background: linear-gradient(90deg, #278AFF 0%, #66D6E2 100%);
				margin: 12rpx auto;
			}
		}

		.ingSty {
			width: 110rpx;
			height: 28rpx;
			flex-shrink: 0;
			border-radius: 4rpx;
			background: #FF5E7F;
			color: #FFF;
			font-family: "PingFang SC";
			font-size: 18rpx;
			font-style: normal;
			font-weight: 600;
			line-height: 24rpx;
			/* 100% */
			text-align: center;
			margin-top: 21rpx;
		}

		.readySty {
			width: 56rpx;
			height: 28rpx;
			flex-shrink: 0;
			border-radius: 4rpx;
			background: #58A0FF;
			color: #FFF;
			font-family: "PingFang SC";
			font-size: 18rpx;
			font-style: normal;
			font-weight: 600;
			line-height: 22rpx;
			/* 100% */
			text-align: center;
			margin-top: 21rpx;
		}

		.readybegin {
			position: absolute;
			bottom: 38rpx;
			right: 24rpx;
			width: 159rpx;
			height: 40rpx;
			flex-shrink: 0;
			border-radius: 500rpx;
			background: #D8D8D8;
			color: #FFF;
			font-family: "PingFang SC";
			font-size: 20rpx;
			font-style: normal;
			font-weight: 500;
			line-height: 40rpx;
			/* 100% */
			text-align: center;
		}

		.allKind {
			color: #535353;
			font-family: "PingFang SC";
			font-size: 24rpx;
			font-style: normal;
			font-weight: 400;
			// margin-top: 20rpx;
			margin-right: 24rpx;
		}

		.goSty {
			display: flex;
			justify-content: center;
			position: absolute;
			bottom: 0;
			right: 24rpx;
			width: 159rpx;
			height: 40rpx;
			flex-shrink: 0;
			border-radius: 500rpx;
			background: linear-gradient(90deg, #FB517A 0%, #FF5264 51%, #FF4740 100%);
			color: #FFF;
			font-family: "PingFang SC";
			font-size: 20rpx;
			font-style: normal;
			font-weight: 500;
			line-height: 40rpx;
			/* 100% */
		}
	}

	.cardListBox {
		// width: 96%;
		display: flex;
		justify-content: space-evenly;
	}

	.cardSty {
		// margin-top: 27rpx;
		color: #535353;
		font-family: "PingFang SC";
		font-size: 26rpx;
		font-style: normal;
		line-height: 26rpx;
		/* 100% */
	}

	.activeCard {
		color: #0E0E0E;
		font-family: "PingFang SC";
		font-size: 32rpx;
		font-style: normal;
		font-weight: 600;
		line-height: 32rpx;
		/* 100% */
	}

	.ativeLine {
		width: 54rpx;
		height: 6rpx;
		flex-shrink: 0;
		border-radius: 500rpx;
		background: linear-gradient(90deg, #278AFF 0%, #66D6E2 100%);
		margin: 12rpx auto;
	}

	.tabbarSty {
		/deep/ .u-icon__icon {
			font-size: 40rpx !important;
		}
	}
}

.content-inner {
	width: 96%;
	height: 100%;
	margin: 0 auto;
	margin-top: 18rpx;
	border-radius: 26rpx;
	background-color: #fff;
	overflow: hidden;

	.lineCardSty {
		width: 96%;
		height: 2rpx;
		background: rgba(0, 0, 0, 0.06);
		margin: 18rpx auto;
	}

	.btnBottomSty {
		width: 166rpx;
		height: 60rpx;
		flex-shrink: 0;
		border-radius: 52rpx;
		border: 2rpx solid #E2E2E2;
		background: #FFF;
		color: #0E0E0E;
		font-family: "PingFang SC";
		font-size: 22rpx;
		font-style: normal;
		font-weight: 400;
		text-align: center;
		line-height: 60rpx;
		/* 100% */
	}

	.content-info {
		width: 95%;
		padding-left: 0;
		margin-top: 15rpx;
		margin: 15rpx auto;

		.info-title {
			color: #8C8C8C;
			font-family: "PingFang SC";
			font-size: 20rpx;
			font-style: normal;
			font-weight: 400;
		}

		.info-content {
			color: #0E0E0E;
			font-family: "PingFang SC";
			font-size: 20rpx;
			font-style: normal;
			font-weight: 600;
			margin-left: 20rpx;
		}

		.info {
			display: flex;
			justify-content: space-between;
			margin-top: 24rpx;

			.logo {
				width: 44rpx;
				height: 44rpx;
				margin-left: 20rpx;
				margin-top: 0;
				vertical-align: middle;
			}

			.info-title {
				color: #535353;
				font-size: 26rpx;
				font-weight: 400;
			}

			.info-content {
				color: #333333;
				font-weight: 600;
				font-size: 26rpx;
			}

			.info-moeny {
				color: #F53F3F;
				font-weight: 600;
				font-size: 28rpx;
			}
		}
	}
}

.shadowBoxSty {
	position: relative;
	margin-top: 20rpx;
}

.shadowSty {
	// width: 100%;
	height: 200rpx;
	filter: blur(15px);
	background-color: #C6D5D9;
	opacity: 0.8;
	margin-left: 24rpx;
	margin-right: 24rpx;
}

.vipTextSty {
	position: absolute;
	top: 50rpx;
	left: 260rpx;
	z-index: 10;
	color: #fff;
	font-size: 30rpx;
	text-align: center;
}

.content-top {
	width: 97%;
	min-height: 170rpx;
	border-radius: 18rpx;
	background-color: #EDFAFF;
	margin: 0 auto;
	// margin-top: 16rpx;
}

.content-time {
	display: flex;
	justify-content: space-between;
	margin-left: 10px;
	margin-right: 10px;

	.time {
		color: #535353;
		font-size: 22rpx;
		margin-top: 25rpx;
	}

	.kind {
		margin-top: 25rpx;
		color: #0E0E0E;
		font-family: "PingFang SC";
		font-size: 22rpx;
		font-style: normal;
		font-weight: 600;
	}
}

.colorSty {
	margin: 30rpx 16rpx 20rpx 16rpx;
	padding-top: 44rpx;
	padding-bottom: 20rpx;

	.time {
		color: #666666;
		font-size: 22rpx;
		margin-left: 6rpx;
	}

	.kind {
		color: #666666;
		font-size: 22rpx;
		margin-left: 6rpx;
	}

	.boxSty {
		border-radius: 0 0 40rpx 40rpx;
	}

	.address {
		width: 250rpx;
		font-size: 22rpx;
		color: #666;
		display: flex;
		align-items: flex-start;
		justify-content: center;

		.ico {
			flex-shrink: 0;
			width: 28rpx;
			height: 28rpx;
			margin-right: 6rpx;
			margin-top: 6rpx;
		}
	}

	.line {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;

		.text {
			color: #278AFF;
			font-size: 26rpx;
			font-weight: 500;
			line-height: 28rpx;
			// margin-top: 20rpx;
		}

		.ico {
			width: 114rpx;
		}
	}

	.route-item {
		width: 276rpx;
		align-items: flex-start;
		justify-content: center;
		font-size: 36rpx;
		font-weight: bold;
		color: #0E0E0E;
	}

}
</style>